<template>
  <van-cell :class="item.class" :title="item.label" title-class="formCellTitle">
    <template #title>
      <span class="custom-title">{{ label }}
        <van-icon v-if="help" name="question" @click="showHelp" />
      </span>
    </template>
    <van-checkbox-group v-model="item.value" direction="horizontal" @change="onCheckGroupChange">
      <van-checkbox v-for="option of initValue" :key="option.value" :name="option.value" style="margin-bottom: 4px;margin-top:4px;margin-right: 16px;text-align: left; width: 40%" :shape="item.shape || 'square'" :icon="item.icon || ''" :checked-color="item.checkedColor || '#85B214 '" :disabled="disabled||readonly">
        {{ option.label }}
      </van-checkbox>
    </van-checkbox-group>
  </van-cell>
</template>
<script>
import EleBase from './EleBase'
import { toJson } from '@/utils/d-form'
export default {
  name: 'EleCheckBox',
  extends: EleBase,
  props: {
    item: {
      type: Object, // 类型
      default: null // 默认值
    }
  },
  data () {
    if (!this.$props.item.value) {
      this.$props.item.value = []
    }
    return {
      refProp: this.$props.item,
      showPicker: false

    }
  },
  beforeCreate () {
  },
  created () {
  },
  mounted () {
    // this.value= this.$props.item.value
    this.initData()
  },
  methods: {
    initData () {
      // let initValue
      if (this.$props.item.dropMode === 'request') {
        // ajax请求获取数据？？？？
        this.initValue = toJson(this.$props.item.dropList)
      } else if (this.$props.item.dropMode === 'function') {
        this.initValue = this.$props.item.dropList
      } else {
        this.initValue = toJson(this.$props.item.dropList) || []
        debugger
        this.initValue.map(option => {
          if (!option.value) {
            option.value = option.v
          }
          if (!option.label) {
            option.label = option.t
          }
        })
      }
    },
    showData () {
      alert(JSON.stringify(this.initValue))
    },
    onCheckGroupChange(event) {
      debugger
      var tmp = []
      event.map((v) => {
        this.item.dropList.map((o) => {
          if (o.value === v) {
            tmp.push(o.label)
          }
        })
      })
      this.item.text = tmp
    }
  }
}
</script>
